<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定,v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值而总是将 Vue 实例的数据作为数据来源 -->

      <!--获取多选框的数据 -->
      <!-- 1.多选框多选 -->
      <h2>你喜欢的水果</h2>
      <input type="checkbox" v-model="likefriut" value="香蕉" />香蕉
      <input type="checkbox" v-model="likefriut" value="西瓜" />西瓜
      <input type="checkbox" v-model="likefriut" value="柚子" />柚子
      <input type="checkbox" v-model="likefriut" value="猕猴桃" />猕猴桃
      <!-- 2.多选框单选----同意协议 -->
      <br />
      <h2>同意协议</h2>
      {{isAgree}}
      <input type="checkbox" v-model="isAgree" />同意协议

      <!-- 获取单选框数据 -->
      <br />
      <h2>今天的天气</h2>
      {{isSun}}
      <br />
      <input type="radio" v-model="isSun" />今天是晴天吗

      <!-- 获取select标签的数据 -->
      <br />
      <h2>选择你喜欢的运动</h2>
      {{likesport}}
      <select name="" id="" v-model="likesport">
        <option value="篮球">篮球</option>
        <option value="羽毛球">羽毛球</option>
        <option value="跑步">跑步</option>
        <option value="骑单车">骑单车</option>
      </select>
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            // 因为要获取多个数据，因此要用数组形式
            likefriut: [],
            // 只收集单个数据，用布尔值
            isAgree: false,
            isSun: false,
            likesport: '',
          };
        },
      });
    </script>
  </body>
</html>
